<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>播放</title>
		<link rel="stylesheet" type="text/css" href="css/main-css.css" />
		<link rel="stylesheet" type="text/css" href="css/viedo.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<nav class="navbar-default" id="navigation">
			<header class="container-fluid">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" id="btn">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<img src="img/bilibili.svg" width="80px">
				</div>
				<div class="navbar-collapse collapse" id="nav">
					<ul class="nav navbar-nav navbar-top">
						<li><a href="index.html">主站</a></li>
						<li class="visible-lg"><a href="#">番剧</a></li>
						<li><a href="#">会员购</a></li>
						<li class="visible-lg"><a href="#">漫画</a></li>
						<li class="visible-lg"><a href="#">赛事</a></li>
						<li class="visible-lg" data-placement="bottom" id="app"><a href="#"><img src="img/iphon.svg">下载APP</a></li>
						<li class="visible-lg">
							<form style="margin-top: 10px;" class="form-inline">
								<div class="form-group">
									<div class="input-group">
										<input type="text" class="form-control" placeholder="B站热门2020全年总结">
										<div class="input-group-addon "><img src="img/search.svg"></div>
									</div>
								</div>
							</form>
						</li>
					</ul>
				</div>
			</header>
		</nav>
		<div class="container-fluid">
			<div class="row">
				<div class="col-lg-1"></div>
				<div class="col-lg-11">
					<ul class="list-inline">
						<li><span style="background-color: #EBCCCC;border-radius: 4px;">活动作品</span></li>
						<li>
							<h4>【12小时】苦中作乐 （妖妖跋扈remix）</h4>
						</li>
						<li class="navbar-right visible-lg" style="margin-right: 50px;background-color: whitesmoke;width: 280px;">
							<h4 class="text-center">
								创作团队
							</h4>
						</li>
					</ul>
					<ul class="list-inline">
						<li>3.9万播放 ·
							491弹幕
							2021-01-03 11:00:16</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="container-fluid ">
			<div class="row">
				<div class="col-lg-1"></div>
				<div class="col-lg-8" style="margin-left: -108px;">
					<div id="videoContainer"></div>
				</div>
				<div class="col-lg-4" id="text">
					<ul class="list-inline visible-lg">
						<li class="navbar-right" style="margin-right: 50px;background-color: whitesmoke;width: 280px;">
							<h4 class="text-center">
								弹幕列表:
							</h4>
						</li>
						<li class="navbar-right" style="margin-right: 55px;width: 280px;">
							<div><img src="img/img2.jpg" width="103%"></div>
						</li>
						<li class="navbar-right" style="margin-right: 50px;width: 280px;">
							<h4>
								相关推荐
							</h4>
						</li>
						<li class="navbar-right" style="margin-right: 50px;width: 280px;">
							<div><img src="img/img12.jpg" width="60%">
								<span>
									三亚奇幻冒险开启！贷人闹海欢乐多
								</span></div>
						</li>
						<li class="navbar-right" style="margin-right: 50px;width: 280px;">
							<div><img src="img/img9.jpg" width="60%">
								<span>
									三亚奇幻冒险开启！贷人闹海欢乐多
								</span></div>
						</li>
						<li class="navbar-right" style="margin-right: 50px;width: 280px;">
							<div><img src="img/img8.jpg" width="60%">
								<span>
									三亚奇幻冒险开启！贷人闹海欢乐多
								</span></div>
						</li>
						<li class="navbar-right" style="margin-right: 50px;width: 280px;">
							<div><img src="img/img7.jpg" width="60%">
								<span>
									三亚奇幻冒险开启！贷人闹海欢乐多
								</span></div>
						</li>
						<li class="navbar-right" style="margin-right: 50px;width: 280px;">
							<div><img src="img/img3.jpg" width="60%">
								<span>
									三亚奇幻冒险开启！贷人闹海欢乐多
								</span>
							</div>
						</li>
					</ul>
				</div>
				<div class="col-lg-7  visible-lg" style="margin-top: -280px;margin-left: 80px;" id="text2">
					<div class="col-lg-12">
						<ul class="list-inline form-control" style="box-shadow: 1px 1px 10px 1px #e6dfdc;">
							<li>865人正在看，</li>
							<li>532条弹幕</li>
							<li class="navbar-right"><input type="button" class="form-control btn-info" value="转发" style="margin-top: -7px;" /></li>
						</ul>
					</div>
					<div class="col-md-12">
						<ul class="list-inline">
							<li>
								<img src="img/head2.svg">
							</li>
							<li>伍皓</li>
						</ul>
						<ul class="list-inline">
							<li><input type="button" class="form-control btn-info" value="关注" /></li>
							<li>这是评论区这是评论区这是评论区这是评论区这是评论区</li>
							<br>
							<li class="navbar-right"><img src="img/zan.svg"></li>
						</ul>
					</div>
					<div class="col-md-12">
						<hr>
						<ul class="list-inline">
							<li>
								<img src="img/head2.svg">
							</li>
							<li>伍皓</li>
						</ul>
						<ul class="list-inline">
							<li><input type="button" class="form-control btn-info" value="关注" /></li>
							<li>这是评论区这是评论区这是评论区这是评论区这是评论区是评论区</li>
							<br>
							<li class="navbar-right"><img src="img/zan.svg"></li>
						</ul>
					</div>
					<div class="col-md-12">
						<hr>
						<ul class="list-inline">
							<li>
								<img src="img/head2.svg">
							</li>
							<li>伍皓</li>
						</ul>
						<ul class="list-inline">
							<li><input type="button" class="form-control btn-info" value="关注" /></li>
							<li>这是评论区这是评论区这是评论区这是评论区这是评论区</li>
							<br>
							<li class="navbar-right"><img src="img/zan.svg"></li>
						</ul>
					</div>
				</div>
			</div>
			<!--移动端 -->
			<div class="col-md-12 visible-xs" style="margin-left: -20px;margin-top: 10px;">
				<ul class="list-inline">
					<li>
						<img src="img/head2.svg">
					</li>
					<li>伍皓</li>
				</ul>
				<ul class="list-inline">
					<li><input type="button" class="form-control btn-info" value="关注" /></li>
					<li>这是评论区这是评论区这是评论区评论</li>
					<li class="navbar-right"><img src="img/zan.svg"></li>
				</ul>
			</div>
			<div class="col-md-12 visible-xs" style="margin-left: -20px;margin-top: 10px;">
			<hr>
				<ul class="list-inline">
					<li>
						<img src="img/head2.svg">
					</li>
					<li>伍皓</li>
				</ul>
				<ul class="list-inline">
					<li><input type="button" class="form-control btn-info" value="关注" /></li>
					<li>这是评论区这是评论区这是评论区评论</li>
					<li class="navbar-right"><img src="img/zan.svg"></li>
				</ul>
			</div>
			<div class="col-md-12 visible-xs" style="margin-left: -20px;margin-top: 10px;">
			<hr>
				<ul class="list-inline">
					<li>
						<img src="img/head2.svg">
					</li>
					<li>伍皓</li>
				</ul>
				<ul class="list-inline">
					<li><input type="button" class="form-control btn-info" value="关注" /></li>
					<li>这是评论区这是评论区这是评论区评论</li>
					<li class="navbar-right"><img src="img/zan.svg"></li>
				</ul>
			</div>
			<div class="col-md-12 visible-xs" style="margin-left: -20px;margin-top: 10px;">
			<hr>
				<ul class="list-inline">
					<li>
						<img src="img/head2.svg">
					</li>
					<li>伍皓</li>
				</ul>
				<ul class="list-inline">
					<li><input type="button" class="form-control btn-info" value="关注" /></li>
					<li>这是评论区这是评论区这是评论区评论</li>
					<li class="navbar-right"><img src="img/zan.svg"></li>
				</ul>
			</div>
			<div class="col-md-12 visible-xs" style="margin-left: -20px;margin-top: 10px;">
			<hr>
				<ul class="list-inline">
					<li>
						<img src="img/head2.svg">
					</li>
					<li>伍皓</li>
				</ul>
				<ul class="list-inline">
					<li><input type="button" class="form-control btn-info" value="关注" /></li>
					<li>这是评论区这是评论区这是评论区评论</li>
					<li class="navbar-right"><img src="img/zan.svg"></li>
				</ul>
			</div>
			<div class="col-md-12 visible-xs" style="margin-left: -20px;margin-top: 10px;">
			<hr>
				<ul class="list-inline">
					<li>
						<img src="img/head2.svg">
					</li>
					<li>伍皓</li>
				</ul>
				<ul class="list-inline">
					<li><input type="button" class="form-control btn-info" value="关注" /></li>
					<li>这是评论区这是评论区这是评论区评论</li>
					<li class="navbar-right"><img src="img/zan.svg"></li> 
				</ul>
			</div>
			<div class="title-line">
				<span class="tit">到底了~</span>
			</div>
		</div>
	</body>
	<script src="js/superVideo.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/video.js" type="text/javascript" charset="utf-8"></script>
</html>
